<template>
	<div class="edit-info">
		<div class="flex-box center align-center p-3">
			<button class="avatar-wrapper" :plain="true" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="user.avatar"></image>
				<div class="font2">添加用户头像</div>
			</button>
		</div>
		<div class="other-form p-3">
			<div class="font1">添加用户昵称信息</div>
			<van-cell class="form-cell" title="昵称" :value="user.nickname" is-link url="/pages/my/edit-nickname" />
		</div>
		<div class="other-form p-3">
			<div class="font1">添加用户昵称信息</div>
			<uni-captcha ref="captcha" scene="register" v-model="formData.captcha" />
		</div>
		

		<form @submit="handleEditNickname">
			<div class="form-item">
				<input name="nickname" type="nickname" placeholder="请输入昵称" :value="user.nickname" />
			</div>

			<button class="submit-btn mt-2" form-type="submit" type="primary">
				保存
			</button>
		</form>

	</div>
</template>

<script setup>
	import {
		reactive,
		ref
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		setUserAvatar,
		setUserNickName,
		getUserInfo
	} from "@/store/user";
	import {
		getFileExtension
	} from "../../utils/tools.js"
	// import request from "@/common/request";
	// import { uploadToQiniu } from "@/common/util";
	import {
		getUserOpenId
	} from '../../utils/getOpenId.js'
	import md5 from 'js-md5'
	const user = ref({
		avatar: '../../static/shouye/logo.png'
	})

	onShow(() => {
		//引入公共模块
		
	})

	user.value = getUserInfo();
	const uniIdCo = uniCloud.importObject('uni-id-co')
	async function handleEditNickname(e) {
		console.log(e);
		if (e.detail.value.nickname && e.detail.value.nickname.length > 0) {
			user.value.nickname = e.detail.value.nickname;
			const openid = await getUserOpenId();
			console.log("openid:" + openid + "," + md5(openid));
			await uniIdCo.refreshCaptcha({
				scene
			})
			const res = await uniIdCo.registerUser({
				username: openid,
				password: md5(openid).substring(0, 10),
				nickname: user.value.nickname,
				avatar: user.value.avatar,
				captcha: '90sA'
			});
			console.log("registerUser:" + JSON.stringify(res));
		} else {
			uni.showToast({
				title: "请输入昵称",
				icon: "none"
			})
		}

	}

	function onChooseAvatar(e) {
		console.log(e);
		uni.showLoading({
			title: "上传中",
		});

		const {
			avatarUrl
		} = e.detail;
		user.value = setUserAvatar(avatarUrl);
		getUserOpenId().then(openid => {
			uniCloud.uploadFile({
				filePath: avatarUrl,
				cloudPath: "/resource/guaguale/user/header/" + openid + "." + getFileExtension(avatarUrl),
				cloudPathAsRealPath: true,
				success: res => {
					console.log("uploadFile" + JSON.stringify(res));
					user.avatar = res.fileID;
					uni.hideLoading()
				},
				fail: err => {
					console.log("uploadFileError:" + err);
					uni.hideLoading()
				}
			})
		})
	}
</script>

<style lang="scss">
	.edit-info {
		width: 100%;
		height: 100%;
		box-sizing: border-box;

		.avatar-wrapper {
			background-color: #fff;
			border: 0 none;
			line-height: 1.5;

			.avatar {
				width: 180rpx;
				height: 180rpx;
				border-radius: 20rpx;
				background-color: #ddd;
			}
		}
	}
</style>